<template>
  <div><!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/nav' }">组织管理</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/nav/forms">表单管理</a></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <!-- 搜索 -->
  <div class="user-content">
    <div class="item">
      <el-input v-model="input" placeholder="请输入用户名或者手机号" />
      <button class="btn">搜索</button>
      <button class="btn1">重置</button>
    </div>
    <!-- 搜索下的按钮 -->
    <div class="newAdd">
      <!-- 新增菜单 -->
      <button @click="dialog = true" class="addBtn">新增菜单</button>
      <el-drawer ref="drawerRef" v-model="dialog" title="新增菜单" :before-close="handleClose" direction="rtl"
        class="demo-drawer">
        <div class="demo-drawer__content">
          <el-form :model="form" :rules="rules">
            <el-form-item label="菜单名称" prop="name" :label-width="formLabelWidth">
              <el-input v-model="form.name" placeholder="请输入菜单描述" />
            </el-form-item>
            <el-form-item label="权限名称" :label-width="formLabelWidth" ref="xiao">
              <el-input v-model="form.region" autocomplete="off" placeholder="请输入权限描述" @input="dan" />
            </el-form-item>
            <el-form-item label="路由路径" prop="src" :label-width="formLabelWidth">
              <el-input v-model="form.src" autocomplete="off" placeholder="请输入路由路径" />
            </el-form-item>
            <el-form-item label="上级菜单" :label-width="formLabelWidth" prop="top">
              <!-- <el-tree :data="myData" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]"
              :props="defaultProps" /> -->
              <el-tree :data="myData" ref="mytree2" @change="myCurrent2" show-checkbox node-key="id"
                :default-expanded-keys="[]" :props="defaultProps" :default-checked-keys="form.defaultPermTreeSelect" />
            </el-form-item>
          </el-form>

          <div class="demo-drawer__footer">
            <el-button @click="cancelForm">取消</el-button>
            <el-button type="primary" :loading="loading" @click="onClick">{{
              loading ? '提交中' : '提交'
            }}</el-button>
          </div>
        </div>
      </el-drawer>
      <!-- 新增按钮权限 -->
      <button class="addBtnAuth" @click="dialog1 = true">新增按钮权限</button>
      <el-drawer ref="drawerRef" v-model="dialog1" title="新增按钮权限" :before-close="handleClose" direction="rtl"
        class="demo-drawer">
        <div class="demo-drawer__content">
          <el-form :model="form1" :rules="rules1">
            <el-form-item label="按钮名称" prop="name1" :label-width="formLabelWidth">
              <el-input v-model="form1.name" autocomplete="off" placeholder="请输入菜单描述" />
            </el-form-item>
            <el-form-item label="权限名称" prop="miao1" :label-width="formLabelWidth">
              <el-input v-model="form1.region" placeholder="请输入权限描述">
              </el-input>
            </el-form-item>
            <el-form-item label="上级菜单" :label-width="formLabelWidth" prop="top1">
              <!-- <el-tree :data="myData"  show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]"
              :props="defaultProps" /> -->

              <el-tree :data="myData" ref="mytree1" @change="myCurrent1" show-checkbox node-key="id"
                :default-expanded-keys="[]" :props="defaultProps" :default-checked-keys="form1.defaultPermTreeSelect" />


            </el-form-item>
          </el-form>

          <div class="demo-drawer__footer">
            <el-button @click="cancelForm">取消</el-button>
            <el-button type="primary" :loading="loading" @click="onClick1">{{
              loading ? '提交中' : '提交'
            }}</el-button>
          </div>
        </div>
      </el-drawer>
    </div>
    <!-- 表格 -->
    <div class="list-item">
      <!-- <el-table :data="data" style="width: 100%">
        <el-table-column prop="roleName" label="用户名称" width="180" />
        <el-table-column prop="description" label="角色描述" width="180" />
        <el-table-column prop="permissions[0].permissionName" label="拥有的权限" width="180" />
        <el-table-column prop="createDate" label="创建时间" width="180" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            <el-button size="small" type="primary" @click="dialog = true">编辑</el-button>
          </template>
        </el-table-column>
      </el-table> -->


      <el-table :data="tableData1" style="width: 100%" row-key="id" border lazy :load="load"
        :tree-props="{ children: 'children' }">
        <el-table-column prop="date" label="名称" />
        <el-table-column prop="name" label="类型">
          <template #default="scope">
            <el-button size="small" type="primary">菜单</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="路由路径" />
        <el-table-column prop="auth" label="权限名称" />
        <el-table-column prop="play" label="操作">
          <template #default="scope">
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            <el-button size="small" type="primary" @click="bian(scope.row)">编辑</el-button>

          </template>
        </el-table-column>
      </el-table>
      <el-drawer ref="drawerRef" v-model="dialog2" title="编辑按钮权限" :before-close="handleClose" direction="rtl"
        class="demo-drawer">
        <div class="demo-drawer__content">
          <el-form :model="form2" :rules="rules2">
            <el-form-item label="按钮名称" prop="name2" :label-width="formLabelWidth">
              <el-input v-model="form2.name" autocomplete="off" placeholder="请输入菜单描述" />
            </el-form-item>
            <el-form-item label="权限名称" prop="miao2" :label-width="formLabelWidth">
              <el-input v-model="form2.region" placeholder="请输入权限描述">
              </el-input>
            </el-form-item>
            <el-form-item label="上级菜单" :label-width="formLabelWidth" prop="top2">
              <el-tree :data="myData" ref="mytree" @change="myCurrent" show-checkbox node-key="id"
                :default-expanded-keys="[]" :props="defaultProps" :default-checked-keys="form2.defaultPermTreeSelect" />
            </el-form-item>
            <div>{{ form2.defaultPermTreeSelect }}</div>
          </el-form>

          <div class="demo-drawer__footer">
            <el-button @click="cancelForm">取消</el-button>
            <el-button type="primary" :loading="loading" @click="onClick2">{{
              loading ? '提交中' : '提交'
            }}</el-button>
          </div>
        </div>
      </el-drawer>

    </div>

  </div>
</template>

<script lang='ts' setup>

import { reactive, ref } from 'vue'
import { ElDrawer, ElMessageBox } from 'element-plus'


//树 默认选中
// const defaultPermTreeSelect = ref([])

const mytree = ref(null);
const mytree1 = ref(null);
const mytree2 = ref(null);

function myCurrent() {
  // console.log(mytree.value?.getCheckedNodes());
  form2.defaultPermTreeSelect = mytree.value?.getCheckedNodes()
}
function myCurrent1() {
  // console.log(mytree.value?.getCheckedNodes());
  form1.defaultPermTreeSelect = mytree1.value?.getCheckedNodes()
}
function myCurrent2() {
  // console.log(mytree.value?.getCheckedNodes());
  form.defaultPermTreeSelect = mytree2.value?.getCheckedNodes()
}


const defaultProps = {
  children: 'children',
  label: 'label',
}
const myData = [
  {
    id: 1,
    label: '组织管理',
    children: [
      {
        id: 4,
        label: '用户管理',
      },
      {
        id: 7,
        label: '角色管理',
      },
      {
        id: 8,
        label: '菜单管理',
      },
    ],
  },
  {
    id: 2,
    label: '靶场管理',
    children: [
      {
        id: 5,
        label: '模拟数据1',
      },
      {
        id: 6,
        label: '模拟数据2',
      },
    ],
  }
]


interface User {
  id: number
  date: string
  name: string
  address: string
  hasChildren?: boolean
  children?: User[]
}

const load = (
  row: User,
  treeNode: unknown,
  resolve: (date: User[]) => void
) => {
  setTimeout(() => {
    resolve([
      // {
      //   id: 31,
      //   date: '2016-05-01',
      //   name: 'wangxiaohu',
      //   address: 'No. 189, Grove St, Los Angeles',
      // },
      // {
      //   id: 32,
      //   date: '2016-05-01',
      //   name: 'wangxiaohu',
      //   address: 'No. 189, Grove St, Los Angeles',
      // },
    ])
  }, 1000)
}

const tableData1 = [
  {
    id: 3,
    date: '组织管理',
    name: '123',
    // hasChildren: true,
    address: '/nav/users',
    auth: 'oranization',
    children: [
      {
        id: 31,
        date: '用户管理',
        name: 'wang',
        address: '/nav/manage',
        auth: 'yonghu',
        children: [
          {
            id: 31,
            date: '新增用户',
            name: 'wang',
            address: '/nav/add',
            auth: 'xinzeng'
          }
        ]
      }
    ],
  },
  {
    id: 33,
    date: '靶场管理',
    name: '123',
    // hasChildren: true,
    address: '/nav/bachang',
    auth: 'ban',
    children: [
      {}
    ]
  }
]


const formLabelWidth = '100px'
let timer: any


const dialog = ref(false)
const dialog1 = ref(false)
const dialog2 = ref(false)
const loading = ref(false)
// 删除
const drawer1 = ref(false)

// const rules = reactive<FormRules>({
//   pass: [{ validator: validatePass, trigger: 'blur' }],
//   checkPass: [{ validator: validatePass2, trigger: 'blur' }],
//   age: [{ validator: checkAge, trigger: 'blur' }],
// })
const xiao = ref({})


const rules = reactive({
  name: [{ required: true, message: '请输入菜单名称' }],
  // miao: { required: true, message: '请输入权限描述' },
  top: { required: true },
  src: {}
})
const rules1 = reactive({
  name1: { required: true, message: '请输入菜单名称' },
  miao1: { required: true, message: '请输入权限描述' },
  top1: { required: true }
})
// const rules2 = reactive({
//   name2: { required: true, message: '请输入菜单名称' },
//   miao2: { required: true, message: '请输入权限描述' },
//   top2:{ required:true }
// })

const form = reactive({
  name: '',
  region: '',
  src: '',
  defaultPermTreeSelect: []
})
const form1 = reactive({
  name: '',
  region: '',
  defaultPermTreeSelect: []
})

// interface myForm {
//   name: string;
//     region: string;
//     defaultPermTreeSelect: {
//         id: number;
//         label: string;
//     }[];
// }

const form2:any = reactive({
  name: '',
  region: '',
  defaultPermTreeSelect: []
})


const drawerRef = ref<InstanceType<typeof ElDrawer>>()
const onClick = () => {
  drawerRef.value!.close()
  console.log(form);
}
const onClick1 = () => {
  drawerRef.value!.close()
  console.log(form1);
}

const onClick2 = () => {
  console.log(form2);
  form2.name = '',
    form2.region = '',
    form2.defaultPermTreeSelect = [],
    console.log(form2);

  drawerRef.value!.close();

}

const handleClose = (done: any) => {
  if (loading.value) {
    return
  }
  ElMessageBox.confirm('是否确认提交?')
    .then(() => {
      loading.value = true
      timer = setTimeout(() => {
        done()
        // 动画关闭需要一定的时间
        setTimeout(() => {
          loading.value = false
        }, 400)
      }, 2000)
    })
    .catch(() => {
      // catch error
    })
}

function bian(n: any) {
  console.log(n, 'nnn');
  dialog2.value = true;
  form2.name = n.date;
  form2.region = n.auth
}

const cancelForm = () => {
  form2.name = '',
    form2.region = '',
    form2.defaultPermTreeSelect = [],
    loading.value = false
  dialog.value = false
  dialog1.value = false
  dialog2.value = false
  clearTimeout(timer)
}

const input = ref('')

// 删除
const handleDelete = (val: any) => {
  console.log("2" + val.name);

}

</script>

<style lang='less' scoped>
.user-content {
  width: 100%;
  min-height: 500px;
  margin-top: 20px;
  background-color: white;
  padding-top: 20px;
  padding-left: 20px;
  box-sizing: border-box;

  .item {
    margin-bottom: 20px;



    .btn1 {
      width: 80px;
      height: 40px;
      line-height: 40px;
      border: none;
      margin-left: 20px;
      border-radius: 4px;
    }

  }

  .el-input {
    width: 200px;
    height: 40px;
  }
}

.addBtn {
  width: 80px;
  height: 40px;
  line-height: 40px;
  border: none;
  background-color: #139DFF;
  color: aliceblue;
  border-radius: 4px;
}

.addBtnAuth {
  width: 120px;
  height: 40px;
  line-height: 40px;
  border: none;
  background-color: #139DFF;
  color: aliceblue;
  border-radius: 4px;
  margin-left: 35px;
}

.btn {
  width: 80px;
  height: 40px;
  line-height: 40px;
  border: none;
  background-color: #139DFF;
  color: aliceblue;
  margin-left: 20px;
  border-radius: 4px;
}

.newAdd {
  margin-bottom: 20px;
}
</style>